<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        type="primary"
        @click="toAdd"
      ><i class="el-icon-plus" />添加讲师</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" label="序号" width="50" />
      <el-table-column
        property="teacherName"
        label="讲师姓名"
        width="200"
      />
      <el-table-column
        property="teacherGender"
        label="性别"
        width="100"
        :formatter="rendererGender"
      />
      <el-table-column property="tags" label="标签" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="warning" @click="updateTeacher(scope.row.id)">修改</el-button>
          <el-button type="danger" @click="removeTeacher(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :title="dialogType == 'Add' ? '添加讲师' : '修改讲师'"
      :visible.sync="dialogVisible"
      width="800px"
    >
      <el-form ref="teacherForm" :model="formData" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="讲师姓名" prop="teacherName">
              <el-input v-model="formData.teacherName" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="讲师性别" prop="teacherGender">
              <el-radio-group v-model="formData.teacherGender">
                <el-radio :label="1">男</el-radio>
                <el-radio :label="2">女</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="标签" prop="tags">
              <el-input v-model="formData.tags" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="成果" prop="research">
              <el-input v-model="formData.research" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="详情内容" prop="content">
              <el-input v-model="formData.content" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  teacherList,
  addTeacher,
  updateTeacher,
  getTeacherById,
  deleteTeacher
} from '@/api/teacher'
import { deepClone } from '@/utils'
import { getRepeatToken } from '@/api/global'
export default {
  name: 'TeacherIndex',
  data() {
    return {
      tableData: [],
      searchEntity: {
        pageNum: 1, // 页码（默认1）
        pageSize: 10, // 分页大小（默认10）
        entity: {
          // 查询对象
        }
      },
      formData: {
        id: '', // id
        content: '', // 详情内容
        updateTime: null, // 修改时间
        tags: '', // 标签
        createTime: null, // 创建时间
        createBy: '', // 创建人
        teacherName: '', // 讲师名称
        research: '', // 成果
        updateBy: '', // 修改人
        teacherGender: 0 // 讲师性别（1：男；2：女）
      },
      dialogType: 'Add',
      dialogVisible: false,
      temp: '',
      rules: {},
      repeatToken: ''
    }
  },
  created() {
    this.temp = deepClone(this.formData)
    this.initData()
  },
  methods: {
    initData() {
      getRepeatToken().then((res) => {
        this.repeatToken = res.data.token
      })
      teacherList(this.searchEntity).then((res) => {
        this.tableData = res.data.pageInfo.list
      })
    },
    rendererGender(row, column, cellValue, index) {
      if (cellValue == 1) {
        return '男'
      } else if (cellValue == 2) {
        return '女'
      } else {
        return '未知'
      }
    },
    toAdd() {
      this.formData = deepClone(this.temp)
      this.dialogType = 'Add'
      this.dialogVisible = true
    },
    save() {
      this.$refs.teacherForm.validate((valid) => {
        if (valid) {
          if (this.dialogType == 'Add') {
            addTeacher(this.formData, { token: this.repeatToken })
              .then((res) => {
                if (res.meta.code == 200) {
                  this.$message.success('添加成功!')
                  this.dialogVisible = false
                }
                this.initData()
              })
              .catch((err) => {
                this.initData()
              })
          } else {
            updateTeacher(this.formData, { token: this.repeatToken })
              .then((res) => {
                if (res.meta.code == 200) {
                  this.$message.success('修改成功!')
                  this.dialogVisible = false
                }
                this.initData()
              })
              .catch((err) => {
                this.initData()
              })
          }
        } else {
          return false
        }
      })
    },
    updateTeacher(id) {
      getTeacherById(id).then((res) => {
        if (res.meta.code == 200) {
          this.dialogType = 'Mod'
          this.formData = res.data.data
          this.dialogVisible = true
        }
      })
    },
    removeTeacher(id) {
      this.$confirm('此操作将永久删除该讲师, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteTeacher(id, { token: this.repeatToken })
            .then((res) => {
              if (res.meta.code == 200) {
                this.$message.success('删除成功!')
                this.dialogVisible = false
              }
              this.initData()
            })
            .catch((err) => {
              this.initData()
            })
        })
        .catch(() => {})
    }
  }
}
</script>
